<template>
  <div>
    <Header title="我的跟帖" />
    <div class="main" v-for="comment in commentsList" :key="comment.id">
      <div class="date">2020-10-01 16:43</div>
      <div class="info">
        <div class="reply" v-if="comment.parent">
          回复: {{ comment.parent.user.nickname }}
          <p>{{ comment.parent.content }}</p>
        </div>
      </div>
      <div class="info1">{{ comment.content }}</div>
      <div class="sic">
        <span>原文: {{ comment.post.title }} </span>
        <van-icon name="arrow" class="arrow" />
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../../components/CommonHeader";
export default {
  data() {
    return {
      commentsList: [],
    };
  },
  components: {
    Header,
  },
  created() {
    this.$axios({
      url: "/user_comments",
    }).then((res) => {
      console.log(res.data);
      this.commentsList = res.data.data;
    });
  },
};
</script>

<style lang="less" scoped>
.main {
  padding: 20/360 * 100vw;
  border-bottom: 1px solid #d7d7d7;
  .date {
    margin: 10/360 * 100vw 0;
    color: #a0a0a0;
  }
  .info {
    padding: 20/360 * 100vw;
    border: 1px solid #cccccc;
    background-color: #e4e4e4;
    p {
      margin-top: 20/360 * 100vw;
    }
  }
  .info1 {
    font-size: 16/360 * 100vw;
    margin-bottom: 10/360 * 100vw;
  }
  .sic {
    display: flex;
    margin-top: 20/360 * 100vw;
    color: #898989;
    span {
      font-size: 14/360 * 100vw;
      flex: 1;
    }
    .arrow {
      font-size: 18/360 * 100vw;
      color: #d7d7d7;
    }
  }
}
</style>